<template>
  <div class="app-container">
    <el-form ref="formData" :model="formData" label-width="160px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>学生信息</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="12">
              <el-form-item label="学号" >
                <el-input v-model="formData.student_no" style="width:300px" />
              </el-form-item>
              <el-form-item label="姓名" >
                <el-input v-model="formData.realname" style="width:300px" />
              </el-form-item>
              <el-form-item label="专业" >
                <el-input v-model="formData.zhuanye" style="width:300px" />
              </el-form-item>
              <el-form-item label="年级" >
                <el-input v-model="formData.grade" style="width:300px" />
              </el-form-item>
              <el-form-item label="班级" >
                <el-input v-model="formData.class" style="width:300px" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="照片">
                <img :src="formData.head_img" style="width: 100px; height: 100px">
              </el-form-item>
              <el-form-item label="紧急联络人" >
                <el-input v-model="formData.jinji_chat" style="width:300px" />
              </el-form-item>
              <el-form-item label="家庭联络电话" >
                <el-input v-model="formData.home_mobile" style="width:300px" />
              </el-form-item>
              <el-form-item>
                <el-button @click="$router.back(-1)">返回</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { detail } from '@/api/member'
export default {
  name: 'Detail',
  data() {
    return {
      formData: {
        student_no: '',
        realname: '',
        zhuanye: '',
        grade: '',
        class: '',
        mobile: '',
        head_img: '',
        jinji_chat: '',
        home_mobile: '',
        house_room: ''
      },
      images_list: []
    }
  },
  created() {
    const id = this.$route.query && this.$route.query.id
    this.fetchData(id)
  },
  methods: {
    fetchData(id) {
      detail({ id }).then(res => {
        this.formData = res.data
      })
    }
  }
}
</script>

<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }
</style>
